<template>
  <div>
    <el-card class="doing">
      <el-row type="flex">
        <el-col :span="12" class="title">执行中的项目</el-col>
      </el-row>
      <el-row v-if="developFlag">
        <el-col :span="24" class="first" v-for="(item1, index) in doProjectList" :key="index">
          <div class="tabTitle">{{ item1.projectName }} {{ item1.verNumber }}</div>
          <el-table :data="item1.data" type="flex" style="width: 100%" border>
            <!-- <el-table-column prop="projectName" label="项目名称" align="center"></el-table-column> -->
            <el-table-column prop="stageName" label="阶段" align="center"></el-table-column>
            <el-table-column prop="startDate" label="开始日期" align="center"></el-table-column>
            <el-table-column prop="endDate" label="结束日期" align="center"></el-table-column>
            <el-table-column label="目标" align="center">
            <template>
              <span>{{ item1.data[0].target }}</span>
            </template>
          </el-table-column>
          </el-table>
        </el-col>
      </el-row>

      <el-row type="flex" v-if="!developFlag">
        <el-table :data="doProjectList" type="flex" style="width: 100%" border>
          <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
          <el-table-column prop="projectName" label="项目名称" width="450" align="center"></el-table-column>
          <el-table-column prop="verNumber" label="版本" align="center"></el-table-column>
          <el-table-column label="目标" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.data[0].target }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button @click="finish(scope.row)">完成</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- <el-col :span="24" class="task" v-show="doingList.length > 1">
          <el-table :data="newList" type="flex" style="width: 100%" border>
            <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
            <el-table-column prop="projectName" label="项目名称" width="450" align="center"></el-table-column>
            <el-table-column prop="verNumber" label="版本" align="center"></el-table-column>
            <el-table-column prop="target" label="目标" align="center"></el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button @click="finish(scope.row)">完成</el-button>
              </template>
            </el-table-column>
          </el-table> -->
        <!-- </el-col> -->
      </el-row>

      <!-- <el-row v-if="doingList && doingList.length <= 0">
        <el-col :span="24" class="first">
          <div class="tabTitle">暂无数据</div>
        </el-col>
      </el-row> -->
    </el-card>
    <el-card class="doing">
      <el-row type="flex">
        <el-col :span="12" class="title">执行中的任务</el-col>
      </el-row>
      <el-row>
        <!-- <el-col
          :span="24"
          class="first"
          v-for="(item1, index) in doingList"
          :key="index"
        >
          <div class="tabTitle">
            {{ item1.projectName }} {{ item1.verNumber }}
          </div> -->
        <el-table :data="doingList" type="flex" style="width: 100%" border>
          <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
          <el-table-column prop="taskName" label="名称" align="center" class="taskClass">
          </el-table-column>
          <!-- <el-table-column label="截止时间">
                <template slot-scope="scope">
                    {{ scope.row.endDate.substring(0, 16) }}
                </template>
            </el-table-column> -->
          <el-table-column prop="endDate" label="截止时间" align="center"></el-table-column>
          <el-table-column prop="userName" label="负责人" align="center"></el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="primary" size="small" plain @click="editOk(scope.row)">已完成</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- </el-col> -->
      </el-row>

      <!-- <el-row type="flex" v-if="!developFlag">
        <el-table :data="newList" type="flex" style="width: 100%" border>
            <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
            <el-table-column prop="projectName" label="项目名称" width="450" align="center"></el-table-column>
            <el-table-column prop="verNumber" label="版本" align="center"></el-table-column>
            <el-table-column prop="target" label="目标" align="center"></el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button @click="finish(scope.row)">完成</el-button>
              </template>
            </el-table-column>
          </el-table> -->
      <!-- <el-col :span="24" class="task" v-show="doingList.length > 1">
          <el-table :data="newList" type="flex" style="width: 100%" border>
            <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
            <el-table-column prop="projectName" label="项目名称" width="450" align="center"></el-table-column>
            <el-table-column prop="verNumber" label="版本" align="center"></el-table-column>
            <el-table-column prop="target" label="目标" align="center"></el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button @click="finish(scope.row)">完成</el-button>
              </template>
            </el-table-column>
          </el-table> -->
      <!-- </el-col> -->
      <!-- </el-row> -->

      <!-- <el-row v-if="doingList && doingList.length <= 0">
        <el-col :span="24" class="first">
          <div class="tabTitle">暂无数据</div>
        </el-col>
      </el-row> -->
    </el-card>
  </div>
</template>

<script>
import bus from "@/components/bus";
import { getExecuting, finishTask, getExecutingProject } from "@/service/workbenchApi";
import { completeTaskInfo } from "@/service/taskApi"
export default {
  name: "myDoing",
  components: {},
  props: ["developFlag", "testFlag"],
  data() {
    return {
      doProjectList: [],//执行中的项目
      newList: [], //刚加的 非开发人员的执行中的任务 如果任务列表超过2个 数据绑定这个
      doingList: [], // 执行中的任务
      projectName: "", // 项目名称
      taskName: "",//任务名称
      taskId: 0, // 任务id
      state: "",
      endDate: "",//截止时间
      userNames: "",//负责人
    };
  },
  methods: {
    // 已完成
    editOk(row) {
        this.$confirm("您确定已完成该任务吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          center: true,
        })
          .then(() => {
            completeTaskInfo({id:row.id,confirmState: 1}).then((res) => {
              if (res.code == 0) {
                this.$message.success("已完成!");
                this.getData();
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消操作",
            });
          });

    },
    finish(row) {
      this.$confirm("您确定已完成了该项目版本号的全部任务吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          finishTask(row.data[0].id).then((res) => {
            this.$message.success("已完成!");
            this.getData();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作",
          });
        });
    },
    getData() {
      // this.newList = [];
      getExecuting().then((res) => {
        if (res.code == 0) {
          this.doingList = res.data;
          // this.doingList.forEach(i => {
          //   this.newList.push(i.data[0]);
          // })
          // console.log(this.newList);
        }
      });
      getExecutingProject().then((res) => {
        if (res.code == 0) {
          this.doProjectList = res.data;
        }
      });
    },
  },
  created() {
    bus.$on("receiveTask", (val) => {
      this.getData();
    });
    this.getData();
  },
};
</script>

<style lang="scss" scoped>
.doing {
  width: 100%;
  margin-top: 10px;
  height: 100%;

  .title {
    font-size: 18px;
    color: #303133;
    font-weight: bold;
    margin-bottom: 10px;
  }

  .tabTitle {
    width: 100%;
    height: 48px;
    line-height: 48px;
    font-size: 16px;
    border: 1px solid #ebeef5;
    border-bottom: none;
    text-align: center;
    font-weight: 700;
    color: #303133;
    background-color: #e9e9e9;
  }

  .first,
  .second {
    height: 100%;
  }
}

.task {
  width: 100%;

  .el-button {
    background: rgba(240, 249, 235, 1);
    border: 1px solid rgba(194, 231, 176, 1);
    border-radius: 3px;
    color: #67c23a;
    font-size: 12px;
  }
}
.taskClass {
  width: 100%;   /*一定要设置宽度，或者元素内含的百分比*/
  overflow:hidden; /*溢出的部分隐藏*/
  white-space: nowrap; /*文本不换行*/
  text-overflow:ellipsis;/*ellipsis:文本溢出显示省略号（...）；clip：不显示省略标记（...），而是简单的裁切*/
}
</style>